<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue js</title>
    <style>
        .completed {
            text-decoration: line-through;
        }

        .something {
            color: red;
        }
    </style>
</head>

<body>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<div class="container">
    <div id="app">
        <ul>
            <li v-for="list in tasks">
                {{ list.id }} - {{ list.author }} - {{ list.name }} - {{ list.price }}
            </li>
        </ul>

    </div>
</div>

<script>

    //添加请求拦截器
//    axios.interceptors.request.use（function（config）{
//        //在发送请求之前做某事
//        return config;
//    }，function（error）{
//        //请求错误时做些事
//        return Promise.reject（error）;
//    }）;
//
//    //添加响应拦截器
//    axios.interceptors.response.use（function（response）{
//        //对响应数据做些事
//        return response;
//    }，function（error）{
//        //请求错误时做些事
//        return Promise.reject（error）;
//    }）;

    var demo = new Vue({
        el: '#app',
        data: {
            tasks: [] //为空，可以是null
        },
        mounted: function () {
            this.getCustomers();
//            this.postData();
        },
        methods: {
            getCustomers: function () {
                var that=this
                axios.get('./book.json')
                        .then(function (response) { //response传参，可以是任何值
                            that.tasks=response.data
                            console.log(response);
                        })
                        .catch(function (response) {
//                            console.log(response)
                        })
            },
            postData: function () {
                var that=this
                axios.post('./postdata.php?id=a12',{message:'abc123'})
                        .then(function (response) { //response传参，可以是任何值
                           console.log(response.data);
                        })
                        .catch(function (response) {
                            console.log(response)
                        })
            }



        }
    })
</script>
</body>

</html>

